<template>
  <div>
    <!-- 查询 -->
    <div>
<!--      <el-input placeholder="请输入护理级别名称" style="width:200px" v-model="queryLevelName"></el-input>-->
<!--      <el-button @click="queryByLevelName" type="success" plain>查询</el-button>-->
      <el-button @click="showAddLevelDialog" type="primary">
        新增
      </el-button>
    </div>
    <!-- 显示所有护理等级信息 -->
    <div>{{errorMessage}}</div>
    <el-table :data="nurseLevelList">
      <el-table-column label="序号" type="index" width="60px"></el-table-column>
      <el-table-column prop="id" label="ID" width="80px"></el-table-column>
      <el-table-column prop="levelName" label="护理级别名称" width="120px"></el-table-column>
      <el-table-column prop="levelStatus" label="状态" width="120px">
        <template #default="scope">
          {{ getLevelStatusName(scope.row.levelStatus) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="showEditLevelDialog(scope.row.id)">修改</el-button>
          <el-button type="danger" @click="removeLevel(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="example-pagination-block">
      <el-pagination
          v-model:current-page="pageContains.pageNum"
          v-model:page-size="pageContains.pageSize"
          :page-sizes="[10,20,30,50,100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageContains.total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
      />
    </div>

    <!-- 护理等级信息对话框 -->
    <el-dialog v-model="nurseLevelDialog" :title="dialogTitle">
      <el-form :model="curNurseLevel">
        <el-form-item label="护理级别名称">
          <el-col :span="11">
            <el-input v-model="curNurseLevel.levelName"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="状态">
          <el-col :span="11">
            <el-select v-model="curNurseLevel.levelStatus">
              <el-option label="启用" value="1"></el-option>
              <el-option label="停用" value="2"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
      </el-form>
      <el-button @click="optLevel()">{{buttonOpt}}</el-button>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import http from '@/axios/http';

let nurseLevelList = ref([]);
let errorMessage = ref("");
let queryLevelName = ref("");
let nurseLevelDialog = ref(false);
let curNurseLevel = ref({});
let dialogTitle = reactive("");
let buttonOpt = reactive("");
let dialogOptType = reactive(1);
let pageContains = reactive({ pageNum: 1, pageSize: 10, total: 0 });

function queryByLevelName() {
  let param = {
    levelName: queryLevelName.value
  };
  http.post('/lyy/get_levels_by_name', param).then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          nurseLevelList.value = result.data.list;
        } else {
          errorMessage.value = result.error;
        }
      }
  ).catch((error) => {
    console.error("查询失败:", error);
    errorMessage.value = "查询失败，请检查输入或联系管理员";
  });
}

function showAddLevelDialog() {
  dialogTitle = "新增护理级别";
  buttonOpt = "新增";
  nurseLevelDialog.value = true;
  dialogOptType = 1;
}

function showEditLevelDialog(levelId) {
  getLevelInfo(levelId);
  dialogTitle = "修改护理级别";
  buttonOpt = "修改";
  nurseLevelDialog.value = true;
  dialogOptType = 2;
}

function getLevelInfo(levelId) {
  let param = {
    id: levelId
  };
  http.post('/lyy/get_level_by_id', param).then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          curNurseLevel.value = result.data;
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

function addLevel() {
  let param = curNurseLevel.value;
  http.post('/lyy/add_level', param).then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          nurseLevelDialog.value = false;
          getAllLevels();
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

function editLevel() {
  let param = curNurseLevel.value;
  http.post('/lyy/modify_level', param).then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          nurseLevelDialog.value = false;
          getAllLevels();
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

function optLevel() {
  if (dialogOptType === 1) {
    addLevel();
  } else if (dialogOptType === 2) {
    editLevel();
  }
}

function removeLevel(levelId) {
  let param = {
    id: levelId
  };
  http.post('/lyy/remove_level', param).then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          getAllLevels();
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

function getAllLevels() {
  http.post('/lyy/get_all_levels').then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          pageContains.total = result.data.total;
          nurseLevelList.value = result.data;
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

function getLevelStatusName(levelStatus) {
  return levelStatus === 1 ? '启用' : '停用';
}

onMounted(() => {
  getAllLevels();
});
</script>